<template>
  <view class="Box">
    <view class="slideshow">
      <swiper :autoplay="true" :indicator-dots="true" circular class="swiper" indicator-active-color="white"
              indicator-color="#ccc" interval="3000">
        <swiper-item v-for="(image, index) in tableData.shopImgList" :key="index">
          <image :src="image" class="swiper-image" mode="widthFix"></image>
        </swiper-item>
      </swiper>
    </view>
    <div class="contextBox">
      <view class="titleBox">
        <view class="titleLeft">
          <view class="title">
            {{ tableData.shopName }}
          </view>
          <view v-if="tableData.type == 1" class="imgType">餐饮</view>
          <view v-if="tableData.type == 2" class="imgType">住宿</view>
          <view v-if="tableData.type == 3" class="imgType">零售</view>
          <view v-if="tableData.type == 4" class="imgType">平台</view>
        </view>

        <view class="titleRight">
          <view class="titleText">
            人均消费:
          </view>
          <view class="moneyBox">
            <view class="moneyLeft">
              ￥
            </view>
            <view class="moneyRight">
              {{ tableData.consumptionPerPerson }}
            </view>
          </view>

        </view>
      </view>
      <view class="tagBox">
        <view v-for="(item,index) in tableData.tag" :key="index" class="">
          <view class="tagItem">
            {{ item }}
          </view>
        </view>
      </view>
      <view class="styleBox">
        <u-parse :content="tableData.shopIntroduce"></u-parse>
      </view>
    </div>

    <view class="positionBox">
      <view class="address">
        <view class="detailedAddress">
          <image
              class="positionImg"
              src="https://echengtuhua.oss-cn-shenzhen.aliyuncs.com/1-2-1%E6%99%AF%E7%82%B9%E8%AF%A6%E6%83%85/%E8%B7%AF%E5%BE%84%2080%403x.png">
          </image>
          <view class="text">
            {{ tableData.detailedAddress }}
          </view>
        </view>
        <view class="">
          |
        </view>
        <view class="distance">
          距您{{ Math.ceil(tableData.distance / 1000) }}km
        </view>
        <view class="">
          |
        </view>
        <view class="navigation">
          <image
              class="positionImg"
              src="https://echengtuhua.oss-cn-shenzhen.aliyuncs.com/1-2-1%E6%99%AF%E7%82%B9%E8%AF%A6%E6%83%85/%E8%B7%AF%E5%BE%84%2081.png">
          </image>
          <view class="">
            导航
          </view>
        </view>
      </view>
      <view class="timeBox">
        <image
            class="positionImg"
            src="https://echengtuhua.oss-cn-shenzhen.aliyuncs.com/1-2-1%E6%99%AF%E7%82%B9%E8%AF%A6%E6%83%85/%E8%B7%AF%E5%BE%84%2083.png">
        </image>
        <view class="">
          营业时间: {{ tableData.businessTime }}
        </view>
      </view>


      <view class="phoneBox">
        <image class="positionImg"
               src="https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/peripheryPhone.png">
        </image>
        <view class="">
          {{ tableData.shopPhone }}
        </view>
      </view>
    </view>

    <view class="scenicBox">
      <view class="scenicTitle">
        所属景区
      </view>
      <view class="scenicItem" @click="scenicClick(tableData.scenicId)">
        <image :src="tableData.scenic.scenicIntroduces[0].imageUrl" class="itemImg">
        </image>
        <view class="itemContext">
          <view class="name">
            {{ tableData.scenic.name }}
          </view>
          <view class="typeBox">
            <view v-for="(item,index) in tableData.scenic.typeNames" :key="index" class="">
              <view v-if="index < 2" class="typeItem">
                {{ item }}
              </view>
            </view>
          </view>
          <view class="notice">
            {{ tableData.scenic.notice }}
          </view>
          <view class="hotBox">
            <image class="hotImg"
                   src="https://echengtuhua.oss-cn-shenzhen.aliyuncs.com/%E8%B7%AF%E5%BE%84%20404.png">
            </image>
            <view class="text">
              {{ tableData.scenic.hot }}
            </view>

          </view>
        </view>
      </view>
    </view>


    <view class="commodityBox">
      <view class="titleBox">
        <view class="title">
          本店商品
        </view>
        <view class="text">
          （注：商品预定后需现场核销）
        </view>
      </view>
      <view class="commodityList">
        <view v-for="(item,index) in tableData.shopSundryList" :key="index" class="">
          <view class="commodityitem" @click="shopSundryListClick(item)">
            <image :src="item.dishesImg" class="commodityImg">
            </image>
            <view class="dishesName">
              {{ item.dishesName }}
            </view>
            <view class="moneybox">
              <view class="moneyText">
                价格:
              </view>
              <view class="moneyRight">
                <view class="">
                  ￥
                </view>
                <view class="price">
                  {{ item.price }}
                </view>
                <view class="specification">
                  /{{ item.specification }}
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
import {
  queryShopDetails
} from "@/api/challenge";

export default {
  data() {
    return {
      tableData: {}
    }
  },
  onLoad(data) {
    console.log(data);
    queryShopDetails({
      shopId: data.id,
      y: uni.getStorageSync('latitude'),
      x: uni.getStorageSync('longitude')
    }).then(res => {
      // console.log('输出', res);
      var idynamicTags = []
      res.tag.split(",").forEach((res, index) => {
        if (res != '') {
          idynamicTags.push(res)
        }
      })
      res.tag = idynamicTags
      this.tableData = res
    })
  },
  methods: {
    scenicClick(data) {
      uni.navigateTo({
        url: '/pages/popular_destination/ScenicSpotDetails?id=' + data + '&y=' + uni
            .getStorageSync('latitude') + '&x=' + uni.getStorageSync('longitude')
      });
    },
    shopSundryListClick(data) {
      uni.navigateTo({
        url: '/pages/popular_destination/ScenicSpotService?id=' + data.id
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.Box {
  width: 100%;

  background-color: #f2f2f2;
  font-family: PingFang SC, PingFang SC-Heavy;
}

.swiper {
  height: 520rpx;
  background-color: #fff;
}

.swiper-image {
  width: 100%;
  height: auto;
}

.contextBox {
  width: 100%;
  background-color: #fff;
  padding: 36rpx 0;

  .titleBox {
    display: flex;
    margin: 0 40rpx;
    justify-content: space-between;
    align-items: center;

    .titleLeft {
      display: flex;
      justify-content: space-between;

      .title {
        font-weight: 800;
        color: #212121;
      }

      .imgType {
        width: 76rpx;
        height: 40rpx;
        line-height: 40rpx;
        font-size: 24rpx;
        background: #ffffff;
        border: 2rpx solid #ff9802;
        border-radius: 22rpx;
        color: #ff9802;
        text-align: center;
        margin-left: 10rpx;
      }
    }

    .titleRight {
      display: flex;
      align-items: center;

      .titleText {
        font-size: 24rpx;
        color: #757575;
      }

      .moneyBox {
        display: flex;
        color: #ff0000;
        align-items: center;

        .moneyLeft {
          font-size: 24rpx;
        }

        .moneyRight {
          font-size: 40rpx;
          font-weight: 800;
        }
      }
    }
  }

  .tagBox {
    display: flex;
    flex-wrap: wrap;
    margin: 10rpx 40rpx 20rpx 40rpx;

    .tagItem {
      font-size: 24rpx;
      padding: 2rpx 8rpx;
      background: #cccccc;
      border-radius: 4px;
      color: #fff;
      margin-right: 12rpx;
    }
  }

  .styleBox {
    margin: 10rpx 40rpx 0rpx 40rpx;
  }
}

.positionBox {
  width: 100%;
  height: 224rpx;
  background: #ffffff;
  margin: 20rpx 0;
  font-size: 28rpx;

  .positionImg {
    width: 24rpx;
    height: 24rpx;
    margin-right: 10rpx;
  }

  .address {
    display: flex;
    padding: 30rpx 40rpx;

    .detailedAddress {
      display: flex;
      align-items: center;
      width: 370rpx;
      margin-right: 14rpx;

      .text {
        width: 350rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

    }

    .distance {
      margin: 0 14rpx;
    }

    .navigation {
      display: flex;
      align-items: center;
      margin-left: 14rpx;
    }
  }
}

.timeBox {
  margin: 0 40rpx;
  display: flex;
  align-items: center;
}

.phoneBox {
  display: flex;
  margin: 30rpx 40rpx 0 40rpx;
  align-items: center;
}

.scenicBox {
  width: 100%;
  height: 392rpx;
  background: #ffffff;
  padding: 32rpx 0;

  .scenicTitle {
    font-weight: 800;
    color: #212121;
    margin: 0 40rpx;
  }

  .scenicItem {
    display: flex;
    margin: 20rpx 40rpx;

    .itemImg {
      width: 264rpx;
      height: 264rpx;
      border-radius: 20rpx;
    }

    .itemContext {
      margin-left: 20rpx;
      flex: 1;

      .name {
        font-size: 36rpx;
        font-weight: 800;
      }

      .typeBox {
        display: flex;
        margin: 14rpx 0;

        .typeItem {
          font-size: 28rpx;
          background: #ff9802;
          border-radius: 4px;
          color: #fff;
          padding: 4rpx 20rpx;
        }
      }

      .notice {
        font-size: 28rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }

      .hotBox {
        display: flex;
        align-items: center;
        margin-top: 14rpx;

        .hotImg {
          width: 32rpx;
          height: 32rpx;
        }

        .text {
          font-size: 28rpx;
          color: #ff5e5e;
          margin-left: 8rpx;
        }
      }
    }
  }
}

.commodityBox {
  width: 100%;
  padding: 32rpx 0;
  margin: 20rpx 0;
  background-color: #fff;

  .titleBox {
    display: flex;
    margin: 0 40rpx;
    align-items: flex-end;

    .title {
      font-weight: 800;
    }

    .text {
      font-size: 24rpx;
      color: #ff7b7b;
    }
  }

  .commodityList {
    margin: 20rpx 32rpx;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .commodityitem {
      width: 326rpx;
      height: 380rpx;
      border: 1px solid #dddddd;
      border-radius: 10px;
      margin-bottom: 20rpx;

      .commodityImg {
        width: 100%;
        height: 160rpx;
        border-radius: 20rpx 20rpx 0 0;
      }

      .dishesName {
        font-size: 28rpx;
        font-weight: 800;
        padding: 20rpx;
      }

      .moneybox {
        display: flex;
        align-items: flex-end;
        border-top: 2rpx solid #dddddd;
        padding: 26rpx 20rpx;

        .moneyText {
          font-size: 28rpx;
          color: #757575;
        }

        .moneyRight {
          display: flex;
          color: #ff0000;
          align-items: flex-end;

          .price {
            font-size: 48rpx;
            font-weight: 800;
          }

          .specification {
            font-weight: 800;
          }
        }
      }
    }
  }
}
</style>
